<template>
  <!-- 如果当前菜单选项信息存在children，为他生成子菜单组件 -->
  <el-submenu v-if="menu.children !== null" :index="menu.index">
    <template slot="title">
      <i class="el-icon-arrow-right"></i>
      <span slot="title">{{ menu.title }}</span>
    </template>
    <template v-for="(item, key) in menu.children">
      <template v-if="item.children !== null">
        <!-- 如果这个导航存在children 递归为他创建子菜单 -->
        <RecursiveSubmenu :key="key" :menu="item" />
      </template>
      <el-menu-item v-else :key="key" :index="item.index">
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-submenu>
  <!-- 否则生成普通菜单选项组件 -->
  <el-menu-item v-else :index="menu.index">
    <i :class="menu.icon || 'el-icon-document'"></i>
    <span slot="title">{{ menu.title }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: "RecursiveSubmenu",
  props: {
    menu: Object
  }
};
</script>
